<template>
       	 <div>
       	 	  <div class="search">
                  <input type="text" v-model="keywords" placeholder="输入城市名称或拼音"/>
              </div>
              <div class="search-content" v-show="keywords" ref='cityList'>
           	      <ul class="search-txt">
           	   	      <li v-for="item in list" :key='item.id'>{{item.name}}</li>
           	   	      <li v-show='hasNoData'>没有匹配到内容</li>
           	      </ul>
              </div>
       	 	
       	 </div>
</template>

<script>
	//城市不止一个，需要拖动
	import Bscroll from 'better-scroll'
    export default {
        name: "search",
        props: {
        	cities: Object
        },
        data () {
        	 return {
        	 	 keywords: '',
        	 	 list: [],
        	 	 timer: null
        	 }
        },
        computed : {
        	hasNoData () {
        		return !this.list.length; //当list中没有内容时的友情提示
        	}
        },
        watch: {//监听keywords的变化
        	keywords (){//搜索关键字
        		if(this.timer){
        			clearTimeout(this.timer);
        		}
        		this.timer = setTimeout(()=>{ //函数截留
        			const result = []; //定义空数组
        			for(var i in this.cities){//循环整个数组
        				this.cities[i].forEach((value)=>{//循环数组中的内容
        					if(value.spell.indexOf(this.keywords)> -1 || value.name.indexOf(this.keywords)> -1){//输入关键字
        						 result.push(value); //将其放入空数组中
        					}
        				})
        			}
        			this.list = result;//再将其放入list这个数组中
        		},100)
        	}
        },
        //为什么要使用函数截留？
        /*
         
         *因为在有些时候，某些函数并不需要在同一时间被执行(或调用)多次，而是隔一段时间执行一次，这样做的
         * 目的也是为了提高代码的性能
         * 
         * 
         * */
        mounted (){
        	 this.scroll = new Bscroll(this.$refs.cityList);
        }
    }
</script>

<style lang="stylus" scoped>
    .search
      height : .36rem
      line-height : .36rem
      text-align: center
      background : #00bcd4
      padding : 0rem .1rem
      input
        width : 100%
        height : .3rem
        box-sizing : border-box
        line-height : .3rem
        border-radius : .06rem
        text-align center
        padding : 0rem .1rem
    .search-content
       width: 100%
       position:absolute
       top: .76rem
       left: 0rem
       bottom: 0rem
       background: darkgray
       z-index: 1
       overflow: hidden
       .search-txt
          li{
            background: #FFFFFF;
          	font-size: .17rem;
          	line-height: .28rem;
          	border-bottom: 1px solid #CACACA;
          	padding-left: .10rem;
          }
</style>
